<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css" />
    <script src="vue.js"></script>
    <script src="axios.js"></script>
    <script src="elementui.js"></script>
    <script src="common.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!--  <el-button @click="add()" type="primary" style="margin-bottom: 20px;">新增用户</el-button> -->
        用户名称:<el-input v-model="input" placeholder="请输入角色名"></el-input>
        <el-button type="primary" @click="searchCar">查询</el-button>

        <el-table :data="tableData" border style='width: 100%'>
            
          <el-table-column prop="uname" label="名称" width="400">
          </el-table-column>

          <el-table-column prop="upwd" label="密码" width="400">
            ******
        </el-table-column>

        <el-table-column fixed="right"  label="操作" width="400">
            <template slot-scope="scope">
                <el-button @click="yhcd(scope.$index, scope.row)" type="text" size="small">用户角色</el-button>
                <el-button @click="handleEdit(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
            </template>
        </el-table-column>

        </el-table>

       

        <!-- 抽屉 -->
        <el-drawer title="用户角色维护" :visible.sync="drawer" :with-header="true" >
            当前用户角色：{{nowuserid}}
            <br>
            <br>
            <template v-for="item in userRoleList">
                &nbsp;
              
                <el-button @click="deleteUserRole(item.id)" type="primary"  style="margin-bottom: 7px" plain>{{item.description}}<i class="el-icon-minus"></i></el-button>
            </template>
            <hr>
            <template v-for="item in roleList">
                &nbsp;
                <el-button @click="insertUserRole(item.id)" type="danger"  style="margin-bottom: 7px" plain>{{item.description}}<i class="el-icon-plus"></i></el-button>
                
            </template>
        </el-drawer>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            drawer: false,//控制抽屉显示隐藏
            tableData: [],
            roleList:[],//所有角色
            input:'',
            nowuserid:'',//当前用户id
            userRoleList:[],//当前用户角色
        },
        mounted() {
            this.initTableData()
            this.allRole()
        },
        methods: {
            insertUserRole(roleid){
                axios.post(API+'addUserrole',{
                    "userid":this.nowuserid,
                    "roleid":roleid
                }).then(res=>{
                    if(res.data.code==200){
                        this.userRoleList.push(res.data.data.role)
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.initTableData();
                    }else{
                        this.$message.error('添加失败');
                        this.initTableData();
                    }
                })
            },
            deleteUserRole(roleid){//根据用户id删除一个角色
               
                axios.post(API+'deleteByUseridAndRoleid',{
                    "userid":this.nowuserid,
                    "roleid":roleid
                }).then(res=>{
                    if(res.data.code==200){
                        this.userRoleList=this.userRoleList.filter(function(item){
                            return item.id!==roleid
                        })
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                    }else{
                        this.$message.error('删除失败');
                    }
                })
            },
            allRole() { //查询所有角色
                axios.get(API+'rolelist').then(res=>{
                    this.roleList = res.data.data.rolelist
                })
            },
            yhcd(i,row) { //用户菜单
                this.nowuserid=row.id;//设置用户id为当前行点击的用户id
                axios.get(API+'selectRoleByUserId/'+this.nowuserid).then(res=>{
                    this.userRoleList = res.data.data.roleList
                })
                this.drawer = true;//将抽屉展示
               
            },
            
            // qued(){ //确定修改
                
            // },
            searchCar(){

            },
            initTableData() {
                axios.get(API+'userList').then(res=>{
                    this.tableData = res.data.data.userList
                    })
            }
        }
    })
</script>
</html>